<template>
    <div>
        <h1>房型的显示页面</h1>
        房型名称<input type="text" v-model="state.name">
        房型大小<input type="text" v-model="state.daxiao">
        <input type="button" value="查询" @click="GetList">
        <table class="table table-bordered">
            <tr>
                <td>Id</td>
                <td>房型名称</td>
                <td>房型大小</td>
                <td>房型面积</td>
                <td>房型价格</td>
            </tr>

            <tr v-for="item in list">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.daxiao }}</td>
                <td>{{ item.mianji }}</td>
                <td>{{ item.money }}</td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">

import { toRefs, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data: any = reactive({
    state: {
        name: "",
        daxiao: "",

    },
    list: [],
});

let { state, list } = toRefs(data);

onMounted(() => {
    GetList();
})

const GetList = () => {

    let obj = {
        name: state.value.name,
        daxiao: state.value.daxiao,
    }

    axios({
        url: '/api/House/SelectHouse/SelectHouse',
        method: 'get',
        params: obj,
    }).then((res) => {
        list.value = res.data.data;
    })
}


</script>

<style scoped></style>